<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>留言板</title>
	<script src="js/jquery-1.11.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"> </script>
	<script src="js/jquery.scrollUp.min.js"></script>
	<script src="js/jquery.color.js"></script>
	
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="css/labs.css">
 
	<style type="text/css">
		body {
			background: url("images/bg.gif")  repeat;
		}
		#main {
			background-color: #FFFFFF;
		}
		.st-txt {
			width: 30%;
			min-width: 150px;
		}
		#scrollUp {
		    background-image: url("images/top.png");
		    bottom: 20px;
		    right: 20px;
		    width: 38px;    
		    height: 38px;   
		}
		blockquote{
		}
	</style>
	<script>
	$(function() {
		//返回顶部 start
        $.scrollUp({
            animation: 'fade',
            activeOverlay: '#00FFFF',
            scrollImg: {
                active: true,
                type: 'background',
                src: 'images/top.png'
            }
        });
		$('.image-switch').addClass('active');
		
		//实例化UE编辑器
		var ue = UE.getEditor('editor');

		$("#smt").on("click", function(e){
			var name = $('#name').val();
			var title = $('#title').val();
			var content = ue.getContent();
			var j = {'name' : name, 'title' : title, 'content' : content, 'method' : 'add'};
			$.post("msgLogic.php", j, function(data){
					// alert(data);
				if(data!=0){
					var em = "<blockquote><span class='label label-primary'>" +
						data.title + "</span><small><b>" +
						data.name + "</b> <cite> 发表于 " +
						data.create_time + "</cite></small>" + 
						data.content + "</blockquote>";
					$('#msg').append($(em).fadeIn(600).css({backgroundColor:"#FCF8C5"}));
    				$('body,html').animate({'scrollTop':$(window).scrollTop()+200},2000);
    				setTimeout(function(){
    					$('#msg blockquote:last').animate({backgroundColor:"#ffffff"},1000);
    				},2500);
				}
			},'json');
		});
		
		$(document).ready(function(e){
			$.post("msgLogic.php", {'method' : 'query'}, function(data){
				if(data!=0){
					$.each(data,function(n,m){
						
						var em = "<blockquote><span class='label label-primary'>" +
							m.title + "</span><small><b>" +
							m.name + "</b> <cite> 发表于 " +
							m.create_time + "</cite></small>" + 
							m.content + "</blockquote>";
						$('#msg').append(em);
					});
				 }
			},'json');
		});
	});
	</script>
</head>
<body>
	<div class="container">
		<div class="row clearfix">
			<div class="col-xs-0 col-sm-1 col-md-2 column"> </div>
			<div id="main" class="col-xs-12 col-sm-10 col-md-8 column ">
				<div id="msg">
					<div class="page-header">
						<h1> 留言板 <small> Message board</small></h1>
					</div>
				</div>
				<hr />
				<form role="form">
					<div class="form-group">
						<label>昵称</label>
						<input type="text" class="st-txt form-control" id="name" placeholder="请输入昵称"/>
					</div>
					<div class="form-group">
						<label>标题</label>
						<input type="text" class="st-txt form-control" id="title" placeholder="请输入标题"/>
					</div>
					<div class="form-group">
						<label>内容</label>
						<script id="editor" type="text/plain" style="width:100%;height:100px;" ></script>
						<!-- <textarea class="form-control" id="content" placeholder="文明上网，理性发言:)" rows="4"></textarea> -->
					</div>

					<button id="smt" type="button" class="btn btn-success">
						 发表 
					</button>
				</form>
				<p></p>
				<hr />
				<p class="text-center text-info"><small>Copyright © 2014 - Power by Fini</small></p>
			</div>
			<div class="col-xs-0 col-sm-1 col-md-2 column"></div>
		</div>
	</div>
</body>
<script type="text/javascript">

  


</script>
</html>

